<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    
    <title>role edit</title>
    <base href="<%=basePath%>/">
    
    <link href="bootstrap/3/css/bootstrap.css" rel="stylesheet"/>
	<link href="index/css/justified-nav.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet" >

	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<script src="bootstrap/3/js/bootstrap.min.js"></script>
	<link href="bootstrap/3/css/datepicker.css" rel="stylesheet"/>
	<script src="bootstrap/3/js/bootstrap-datepicker.js"></script>
	
	<link rel="stylesheet" href="scripts/Tree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="scripts/Tree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script src="scripts/Tree/jquery.ztree.core-3.5.js" type="text/javascript" ></script>
	<script src="scripts/Tree/jquery.ztree.excheck-3.5.js" type="text/javascript" ></script>
	
	<script src="scripts/validateForm.js?t=123"></script>
	
	<style>
		body{
			margin-left: 10px;
			margin-top: 7px;
		}
	</style>

	<script type="text/javascript">
	
	var IDMark_Switch = "_switch",
		IDMark_Icon = "_ico",
		IDMark_Span = "_span",
		IDMark_Input = "_input",
		IDMark_Check = "_check",
		IDMark_Edit = "_edit",
		IDMark_Remove = "_remove",
		IDMark_Ul = "_ul",
		IDMark_A = "_a";
		
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			view: {
				addDiyDom: addDiyDom
			},
			callback: {
				onClick: zTreeOnClick2,
				onCheck: zTreeOnCheck2
			}
		};
		
		function zTreeOnCheck2(event, treeId, treeNode){
			return ;
			var treeObj = $.fn.zTree.getZTreeObj("rulerTree");
			if(true){
				var uivd = "uivd_node_"+treeNode.id;
				$("#"+uivd).children("input:checkbox").attr("checked",  treeNode.checked);
				if(treeNode.checked)
					treeNode.rulerWord = "quivd";
				else
					treeNode.rulerWord = "";
				
				if(treeNode.pId<1){
					var nodes = treeObj.getNodesByParam("pId", treeNode.id, null);
			    	for(var i=0;i<nodes.length;i++){
			    		uivd = "uivd_node_"+nodes[i].id;
						$("#"+uivd).children('input:checkbox').attr("checked",  treeNode.checked);
						if(treeNode.checked)
				    		nodes[i].rulerWord = "uivd";
				    	else
				    		nodes[i].rulerWord = "";
			    	}
				}
			}
		}
		
		function zTreeOnClick2(event, treeId, treeNode){
			var uivd = "uivd_node_"+treeNode.id;
			var word="";
			var v= $("#"+uivd).children('input:checkbox:checked');
	  		for(var i=0;i<v.length;i++){
	  			word += v[i].value;
	  		}
	  		treeNode.rulerWord = word;
	  		console.log(word);
		}
		
		function selectParentSub(obj){
			var checked = $(obj).attr("checked")=="checked" ? true:false;
			console.log("checked = "+checked);
			$(obj).parent().children("input:checkbox").each(function(){
			    if ('' != $(this).attr("value")) {
					console.log( $(this).attr("value") );
			        $(this).attr("checked", checked); 
			    }
			});
		}
		
		function addDiyDom(treeId, treeNode) {
			if( treeNode.pId == undefined)
				return;
			var aObj = $("#" + treeNode.tId + IDMark_A);
			var editStr = "<span id=uivd_node_"+treeNode.id+" name=uivd_node >";
			editStr +="<input type=checkbox value='i' />增加 &nbsp;";
			editStr +="<input type=checkbox value='u' />修改 &nbsp;";
			editStr +="<input type=checkbox value='d' />删除 &nbsp;";
			editStr +="<input type=checkbox value='v' />查看详情&nbsp;";
			editStr +="<input type=checkbox value='' onclick=\"selectParentSub(this)\" />全选&nbsp;";
			editStr +="</span>";
			aObj.append(editStr);

			if( treeNode.rulerWord != undefined && treeNode.rulerWord!="null"){
				var word = treeNode.rulerWord.split("");
				for(var j=0; j<word.length; j++)
					$("#uivd_node_"+treeNode.id).children("input:checkbox[value='"+word[j]+"']").attr("checked",  true);
			}
			  
		}
		
		var array=eval("(${rightString})");
		if(window.console)
			console.log(array);
		
		var zNodes =array.array;
		
		$(document).ready(function(){
			$("#rid").val(array.id);
			$("#rname").val(array.name);
			$.fn.zTree.init($("#rulerTree"), setting, zNodes);
		});
		
		function selectAll(obj, wd){
			var checked = $(obj).attr("checked")=="checked" ? true:false;
			console.log("checked="+checked);
			var treeObj = $.fn.zTree.getZTreeObj("rulerTree");
			/*
			//遍历属性
			for(var p in treeObj){
			 	if(typeof(treeObj[p])=="function")
				 	console.log(p+"()");
				 else
				 	console.log(p);
			}
			*/
			var nodes = treeObj.getNodes();
		//	console.log(nodes);
			/*
			//遍历属性
			for(var p in nodes[0]){
			 	if(typeof(nodes[0][p])=="function")
				 	console.log(p+"()");
				 else
				 	console.log(p);
			}
			*/
			if(wd==''){
				treeObj.checkAllNodes(checked);
				$(".ztree input[type=checkbox]").each(function(){
				 	if ( $(this).attr("value") == "")
				 		$(this).click();
					/*
					 if ('' != $(this).attr("value")) {
						console.log( $(this).attr("value") );
				        $(this).attr("checked", checked); 
				    }
				    */
				});
			}else if(wd=='readonly'){
				treeObj.checkAllNodes(checked);
				$(".ztree input[type=checkbox]").each(function(){
					$(this).attr("checked",  false);
				});
			}else{
				$(".ztree input:checkbox[value='"+wd+"']").each(function(){
					$(this).attr("checked",  checked);
				});
			}
		}
		
	</script>
  </head>
  
  <body>
  
  	<!-- 返回 -->
	<div>
		<div class="alert-info" style="">
			<a href="${action }?" class="btn btn-warning">返回</a>
			<div style="display:inline;margin-left:30px;color:#f00;">
				${msg }
			</div>
		</div >
	</div>
	
  	<form id="myform" action="${action }?method=${method}" method="post" >
		<div class="container" style="margin-left:0px;" >
				<input type="hidden" id="rid" name="roleInfo.roleId"  value="${r_id}"/>
				<input type="hidden" id="rightString" name="rightString" />

				<div class="row">
					<div class="col-xs-4">角色名称: 
						<s:if test="roleInfo.flag>0">
						 	<input name="roleInfo.roleName" value="${roleInfo.roleName}" isValidate="true" notEmpty="true"  notSpecial="true"  specialChar="~!@#$%^&*()+ |?"  leng="40" minLeng="4"/>
						</s:if>
						<s:else>
						 	<input name="roleInfo.roleName" disabled value="${roleInfo.roleName}" isValidate="true" notEmpty="true"  notSpecial="true"  specialChar="~!@#$%^&*()+ |?"  leng="40" minLeng="4"/>
						</s:else>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-7">
						<div style="width:500px;">
									<input type="checkbox" onclick="selectAll(this,'');" />全选  
									<input type="checkbox" onclick="selectAll(this,'readonly');" />只读全选  
									&nbsp; 
									<input type="checkbox" onclick="selectAll(this,'i');" />[增加]全选 
									&nbsp; 
									<input type="checkbox" onclick="selectAll(this,'u');" />[修改]全选  
									&nbsp; 
									<input type="checkbox" onclick="selectAll(this,'d');" />[删除]全选  
									&nbsp; 
									<input type="checkbox" onclick="selectAll(this,'v');" />[查看详情]全选  
								</div>
					</div>
				</div>
				<div class="row">
						<div class="col-xs-7" >
								<ul  id="rulerTree" class="ztree" style="width:535px;" ></ul>
								<br/>
						</div>
				</div>
				<div class="row">
					<div class="col-xs-7">
						<input  type=submit class="btn btn-success btn-lg btn-block" value="提交"  />
						<input  type="button" class="btn btn-primary btn-lg btn-block" value="取消" onclick="javascript:history.back(-1);" />
					</div>
				</div>
		</div>
	</form>
	
	
		<script>
		$(document).ready(function(){
			$("#myform input[type='submit']").click(function(e){
			    e.preventDefault();//阻止提交按钮的默认 action
			//	  alert("Submit prevented");
				if(!$("#myform").validateForm()){
					return ;
				}
				sub(); //$("#myform").submit();
			});
		});
		
		function sub(){
			if(confirm("确定提交修改吗？")){
				var treeObj = $.fn.zTree.getZTreeObj("rulerTree");
				var nodes = treeObj.getCheckedNodes(true);
				if(window.console){
					console.log(nodes);
					console.log("--------------------------");
				}
				var str="";
				var tmp = "";
				for(var i=0;i<nodes.length;i++){
					tmp = "";
					tmp +=nodes[i].id+",";
					if( nodes[i].rulerWord==undefined || nodes[i].rulerWord == "undefined" )
						tmp +=";";
					else
						tmp +=nodes[i].rulerWord+";";
					str += tmp;
					if(window.console)
						console.log(nodes[i].name+": "+tmp);
				}
				
				$("#rightString").val(str);
				if(window.console)
					console.log(str);
				document.forms[0].submit();
			}
		}
								
		</script>
	
  </body>
</html>
